<template>
  <n-grid y-gap="6" x-gap="6" :cols="val.cols">
    <template v-for="item in val.reportdata">
      <n-gi>
        <div class="report _box _box_row _pd045">
          <div class="_box1">
            {{ item.level }} {{ item.user_name }}
            <n-time unix :time="item.log_time" format="hh:mm" />
          </div>
          <div class="_box2">
            <div class="_left">
              <div class="_boss_box">
                <img
                  :class="`_boss_set_${item.boss_name}`"
                  :src="cfg.function.boss_ava(item.boss_name, 60)"
                />
              </div>
            </div>
            <div class="_right">
              <div class="_damage">
                {{ item.damage.toLocaleString() ?? 0 }}
              </div>
            </div>
          </div>
          <div class="_imglist">
            <template v-for="item in item?.icon?.split(',')">
              <img class="_avatar" :src="cfg.function.ava(item)" />
            </template>
          </div>
          <div class="_hp">
            <n-progress
              style="
                margin-top: 0.2rem;
                border: solid 1px #322a18;
                box-shadow: 0 0 3px #000;
                border-radius: 2px;
              "
              :height="20"
              :border-radius="0"
              indicator-text-color="rgb(192 209 204)"
              rail-color="#04090A"
              color="#D23117"
              type="line"
              :percentage="Number(((item.min_hp / item.max_hp) * 100).toFixed(2))"
              :indicator-placement="'inside'"
            >
              <template #default
                >{{ Number(((item.min_hp / item.max_hp) * 100).toFixed(2)) }}%
                {{ parseInt(item.min_hp / 10000) }}w
              </template>
            </n-progress>
          </div>
        </div>
      </n-gi>
    </template>
  </n-grid>
</template>
<script>
import { cfg } from "@/cfg/cfg.js";

export default {
  props: {
    val: {},
  },
  setup(props) {
    return {
      cfg,
      val: props.val,
    };
  },
};
</script>
